var names = null;
$(function () {
    //获取登陆后session的username
    var name = null;
    var howManyComment = null;
    $.get("getLoginUser", {}, function (data) {
        name = data.username;
        names = name;
    });
    var tag = false;
    var tag_collect = false;
    //获取当前图片的收藏状态
    $.get("getCondition", {
        src: document.getElementById('pic').getAttribute("src")
    }, function (data) {
        if (data[0] == "true") {
            tag_collect = true;
            document.getElementById("collect").src = "images/saved.svg";
        }
        if (data[0] == "false") {
        }
        if (data[1] == "true") {
            tag = true;
            document.getElementById("like").src = "images/liked.svg";
        }
        if (data[1] == "false") {
        }
    });
    //收藏功能 传回当前图片的src和username，存或者删，在对应的表中
    $("#collect").click(function () {
        if (tag_collect === false) {
            this.src = "images/saved.svg";
            tag_collect = true;
            $.get("addCollect", {
                src: document.getElementById('pic').getAttribute("src"),
                username: name
            }, function (data) {
                alert("收藏成功")
            });
        } else {
            this.src = "images/save.svg";
            tag_collect = false;
            $.get("reduceCollect", {
                src: document.getElementById('pic').getAttribute("src"),
                username: name
            }, function (data) {
                alert("取消收藏")
            });
        }
    });
    //点赞功能，传回当前图片的src，点赞表中点赞+1，或者点赞-1
    $("#like").click(function () {
        if (tag === false) {
            this.src = "images/liked.svg";
            tag = true;           //true位置要放到dom操作之上
            //点赞数+1
            $.get("addLike", {
                src: document.getElementById('pic').getAttribute("src")
            }, function (data) {
                alert("点赞成功")
            });
            //dom操作要放到get操作下
            var num = document.getElementById("likeNumb").innerText++;
            document.getElementById("likeNumb").innerText(num);
        } else {
            this.src = "images/like.svg";
            tag = false;          //false位置要放到dom操作之上
            //点赞数-1
            $.get("reduceLike", {
                src: document.getElementById('pic').getAttribute("src")
            }, function (data) {
                alert("取消点赞")
            });
            //dom操作要放到get操作下
            var num = document.getElementById("likeNumb").innerText--;
            document.getElementById("likeNumb").innerText(num);
        }
    });
    //把点赞数量显示出来，传回图片的src，把对应数据库表中的点赞数返回
    $.get("getLike", {src: document.getElementById('pic').getAttribute("src")}, function (data) {
        $("#likeNumb").append(data);
    });
    //获取评论总数    传回图片src，查询评论数返回
    $.get("getComNumb", {src: document.getElementById("pic").getAttribute("src")}, function (data) {
        $("#comNumb").append("共有" + data + "条评论");
        howManyComment = data;
    });
    //把数据库的评论读取到评论区，获取当前图片的src，数据库中传回所有该图的评论
    $.get("getComment", {src: document.getElementById('pic').getAttribute("src")}, function (data) {
        for (var i = 0; i < data.length; i++) {
            var username = data[i].username;
            var com = data[i].content;
            $("#comment").after("                        <ol class=\"comment-list\" >\n" +
                "                            <li class=\"comment\">\n" +
                //第几条评论
                "                                <h3 class=\"comments-title\"><span class=\"comments-number\">" + "第" + (i + 1) + "条评论" + "</span></h3>\n" +
                "                                <article class=\"comment-body\">\n" +
                "                                    <figure class=\"comment-author-avatar\">\n" +
                "<!--                                        评论人的头像-->\n" +
                "                                        <img src=\"images/sofia-joelsson.jpg\" alt=\"Sofia\" id=\"comHead\">\n" +
                "                                    </figure><!-- .comment-author-avatar -->\n" +
                "                                    <div class=\"comment-wrap\">\n" +
                "                                        <div class=\"comment-author\">\n" +
                "                                                <span class=\"fn\">\n" +
                "<!--                                                    评论人的id-->\n" +
                "                                                    <a href=\"#\">" + username + "</a>\n" +
                "                                                </span><!-- .fn -->\n" +
                "                                        </div><!-- .comment-author -->\n" +
                "<!--                                        评论的内容-->\n" +
                "                                        <p><br>" + com + "</p>\n" +
                "                                    </div><!-- .comment-wrap -->\n" +
                "                                    <div class=\"clearfix\"></div>\n" +
                "                                </article><!-- .comment-body -->\n" +
                "                            </li><!-- .comment -->\n" +
                "                        </ol><!-- .comment-list -->\n" +
                "                            <br>\n" +
                "                            <hr />\n" +
                "                            <br>");
        }
    });
    //评论功能，获取当前输入框的评论，传到后端，并且把输入框中的数据写到<p>
    $("#btn_send").click(function () {
        var name;
        $.get("getLoginUser", {}, function (data) {
            name = data.username;
            $.ajax({
                type: "post",
                url: "addComment",
                data: {
                    username: name,
                    msg: $("#com").val(),
                    src: document.getElementById('pic').getAttribute("src")         //获取图片src
                },
                success: function (data) {
                    alert("发送成功");
                    howManyComment++;
                    $("#comNumb").text("共有" + howManyComment + "条评论");
                    $("#comment").after("              <ol class=\"comment-list\" >\n" +
                        "                            <li class=\"comment\">\n" +
                        "                                <h3 class=\"comments-title\"><span class=\"comments-number\">" + "第" + howManyComment + "条评论" + "</span></h3>\n" +
                        "                                <article class=\"comment-body\">\n" +
                        "                                    <figure class=\"comment-author-avatar\">\n" +
                        "<!--                                        评论人的头像-->\n" +
                        "                                        <img src=\"images/sofia-joelsson.jpg\" alt=\"Sofia\" id=\"comHead\">\n" +
                        "                                    </figure><!-- .comment-author-avatar -->\n" +
                        "                                    <div class=\"comment-wrap\">\n" +
                        "                                        <div class=\"comment-author\">\n" +
                        "                                                <span class=\"fn\">\n" +
                        "<!--                                                    评论人的id-->\n" +
                        "                                                    <a href=\"#\">" + name + "</a>\n" +
                        "                                                </span><!-- .fn -->\n" +
                        "                                        </div><!-- .comment-author -->\n" +
                        "<!--                                        评论的内容-->\n" +
                        "                                        <p>" + $("#com").val() + "</p>\n" +
                        "                                    </div><!-- .comment-wrap -->\n" +
                        "                                    <div class=\"clearfix\"></div>\n" +
                        "                                </article><!-- .comment-body -->\n" +
                        "                            </li><!-- .comment -->\n" +
                        "                        </ol><!-- .comment-list -->\n" +
                        "                            <br>\n" +
                        "                            <hr />\n" +
                        "                            <br>");
                },
                error: function (data) {
                    alert("发送失败失败");
                }
            });
        });
    });
});